<template>
    <view class="container">
        <u-transition v-if="grabOrder != null" :show="grabOrder != null">
            <view class="nft-state">
                <u-icon
                    name="https://img.ionepin.com/955324601e1d8aafd627d52727bb7d9aa9ab47eb.png"
                    size="42rpx"
                ></u-icon>
                <view class="nft-state-text">等待支付</view>
            </view>
            <u-count-down
                :time="countDown()"
                format="HH:mm:ss"
                autoStart
                @change="onChange"
            >
                <view class="time">
                    <text class="time-item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                    <text class="time-item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                    <text class="time-item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                </view>
            </u-count-down>
            <view class="nft-info">
                <u-image
                    :src="grabOrder.product.mainImg"
                    width="250rpx"
                    height="250rpx"
                ></u-image>
                <u-text
                    :text="grabOrder.product.name"
                    size="28rpx"
                    color="#000000"
                    align="center"
                    margin="30rpx 0 0 0"
                    :lines="1"
                ></u-text>
            </view>
            <view class="label-cell">
                <u-cell-group
                   :border="false"
                >
                    <u-cell
                        title="支付方式"
                        :border="false"
                        :isLink="true"
                        rightIconStyle="font-size: 34rpx;color: #000000"
                        titleStyle="font-size: 26rpx;line-height: 1.5"
                        @click="sheetPayShow = true"
                    >
                        <view class="pay-info" slot="value">
                            <u-icon
                                :name="actionPay.logo"
                                size="42rpx"
                            ></u-icon>
                            <view class="pay-name">{{ actionPay.title }}</view>
                        </view>
                    </u-cell>
                    <u-cell
                        title="优惠"
                        :border="false"
                        :isLink="true"
                        rightIconStyle="font-size: 34rpx;color: #E02020"
                        v-if="activeTicket"
                        titleStyle="color: #E02020;font-size: 26rpx;line-height: 1.5"
                        @click="sheetTicketShow = true"
                    >
                        <u-text
                            :text="activeTicket.description"
                            size="28rpx"
                            color="#E02020"
                            slot="value"
                            align="right"
                            center
                        ></u-text>
                    </u-cell>
                </u-cell-group>
                <view class="order-price">
                    <view class="order-price-label">总价</view>
                    <u-text
                        :text="grabOrder.totalMoney"
                        size="28rpx"
                        bold
                        align="right"
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 6rpx;"
                    ></u-text>
                </view>
            </view>
            <u-text
                :text="payMoney"
                size="52rpx"
                bold
                align="center"
                prefixIcon="rmb"
                iconStyle="font-size: 40rpx; color: #000000; font-weight: bold;top: 6rpx;"
                margin="88rpx 0 0 0"
            ></u-text>
            <view class="bottom">
                <u-button
                    type="primary"
                    :plain="true"
                    text="已支付成功，去查看"
                    customStyle="margin-bottom: 30rpx;color: #000000;border: 1px solid #000000;"
                    @click="$u.route('pages_v2/myPage/index')"
                >
                </u-button>
                <u-button
                    class="btn-confirm"
                    text="确认支付"
                    customStyle="color: #FFFFFF;font-size: 30rpx;"
                    @click="payment"
                    v-if="type==='grab'"
                ></u-button>
                <u-button
                    class="btn-confirm"
                    text="确认支付"
                    customStyle="color: #FFFFFF;font-size: 30rpx;"
                    v-if="type==='priority'"
                    @click="prioritySubmit()"
                ></u-button>
                <u-button
                    class="btn-confirm"
                    text="确认支付"
                    customStyle="color: #FFFFFF;font-size: 30rpx;"
                    @click="payment"
                    v-if="type==='pay_priority'"
                ></u-button>
            </view>
            <u-action-sheet
                :show="sheetTicketShow"
                round="36rpx"
                safeAreaInsetBottom
            >
                <view class="sheet-ticket-body">
                    <view class="sheet-close-icon" @click="closeTicketSheet"></view>
                    <view class="sheet-ticket-title">优惠券({{ total }})</view>
                    <view class="sheet-ticket-ul">
                        <u-list
                          height="470rpx"
                          @scrolltolower="scrolltolower"
                          :preLoadScreen="total"
                        >
                            <view class="ticket-info" v-for="userTicket in ticketList" :key="userTicket.id">
                                <u-icon
                                    :name="isAction(userTicket)? 'https://img.ionepin.com/e3d0dc1e5ed9e06ff407e7795fe2e56d7e39105c.png':'https://img.ionepin.com/33e306e6d477dcc78cfe4900e86250dd2c97417c.png'"
                                    size="44rpx"
                                    @click="actionTicket(userTicket)"
                                ></u-icon>
                                <ticket-item
                                  :ticket='userTicket'
                                  class="ticket-item"
                                ></ticket-item>
                            </view>
                        </u-list>
                    </view>
                    <view class="sheet-bottom">
                        <u-button
                            class="btn-ticket-confirm"
                            text="确认使用"
                            customStyle="color: #FFFFFF;font-size: 30rpx;"
                            @click="closeSheetTicket"
                        ></u-button>
                    </view>
                </view>
            </u-action-sheet>
            <u-action-sheet
                :show="sheetPayShow"
                round="36rpx"
            >
                <view class="sheet-body">
                    <view class="sheet-close-icon" @click="closeSheet"></view>
                    <view class="sheet-title">立即支付</view>
                    <view class="sheet-price">{{ payMoney }}</view>
                    <view class="sheet-pay-type">选择支付方式</view>
                    <view class="sheet-pay-platform">
                        <u-list
                           height="295rpx"
                        >
                            <block v-for="(item, k) in payChannelList" :key="k">
                                <view class="sheet-pay-item" @click="selectPlatform(item)">
                                    <view class="sheet-pay-info">
                                        <u-icon
                                            :name="item.logo"
                                            width="54rpx"
                                            height="54rpx"
                                        ></u-icon>
                                        <u-text
                                            :text="item.title"
                                            size="32rpx"
                                            color="#000000"
                                            margin="0 0 0 25rpx"
                                            :lines="1"
                                        ></u-text>
                                    </view>
                                    <view class="sheet-pay-select" v-if="actionPay.id==item.id"></view>
                                </view>
                            </block>
                        </u-list>
                        <view class="sheet-pay-bottom">
                            <view @click="selectPay" class="sheet-pay-onsubmit">确认选择</view>
                        </view>
                    </view>
                </view>
            </u-action-sheet>
        </u-transition>
    </view>
</template>

<script>
    import TicketItem from "@/components/TicketItem"
    import { getGrabOrderCashierData, getUserTicketPage, getGrabOrderConfirm, getPayChannel } from "@/config/api"
    import { priorityCreate, getUnionWechatPay, getPlutusPayGrab  } from "@/config/api-java"
    import { keepTwoDecimalFull } from "@/untils"
    import { javaBaseUrl } from "@/config/config"
    import PayPlatform from "@/components/PayPlatform"
    // #ifdef H5
    import { isWeChat } from "@/untils"
    // #endif
    export default {
        name: "index",
        components: {
            TicketItem,
            PayPlatform
        },
        data() {
            return {
                timeData: {},
                sheetTicketShow: false,
                id: null,
                grabOrder: null,
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    column: "id",
                    direction: "asc"
                },
                ticketList: [],
                total: 0,
                activeTicket: {
                    id: null
                },
                type: null,
                productId: null,
                priorityTicketId: null,
                sheetPayShow: false,
                sheetData: {
                    payType: "plutus",
                    orderId: null,
                    payPrice: null,
                    orderType: "alipay"
                },
                payChannelList: [],
                actionPay: {}
            }
        },
        onLoad(option) {
            this.type = option.type
            if (this.type === 'grab') {
                this.id = option.id
            } else if(this.type === 'priority') {
                this.productId = option.productId
                //this.priorityTicketId = option.priorityTicketId
            } else if(this.type === 'pay_priority') {
                this.id = option.id
                this.priorityTicketId = option.priorityTicketId
            }
            this.getData()
        },
        computed: {
          payMoney() {
              if(this.activeTicket) {
                  if (this.activeTicket.type === 'discount') {
                      return keepTwoDecimalFull(this.grabOrder.totalMoney * this.activeTicket.value)
                  } else if (this.activeTicket.type === 'money') {
                      return keepTwoDecimalFull(this.grabOrder.totalMoney * 1 - this.activeTicket.value * 1)
                  } else {
                      return this.grabOrder.totalMoney
                  }
              } else {
                  return this.grabOrder.totalMoney
              }
          }
        },
        methods: {
            selectPlatform(item) {
                this.actionPay = item
            },
            async getData() {
                if (this.type === 'grab') {
                    var res = await getGrabOrderCashierData(this.id)
                } else if(this.type === 'priority') {
                    var res = await getGrabOrderConfirm({ productId: this.productId, orderType: "first" })
                    this.priorityTicketId = res.firstTicket.id
                } else if (this.type === 'pay_priority') {
                    var res = await getGrabOrderCashierData(this.id)
                }
                this.grabOrder = res
                await this.getTicketPage()
                this.payChannelList = await getPayChannel()
                this.actionPay = this.payChannelList.length > 0 ? this.payChannelList[0]:0
            },
            onChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            },
            closeTicketSheet() {
                this.sheetTicketShow = false
            },
            async getTicketPage(more = false) {
                const res = await getUserTicketPage(this.listQuery)
                if (more) {
                    this.ticketList = [...this.ticketList, ...res.items]
                } else {
                    this.ticketList = res.items
                    this.activeTicket = this.ticketList.length > 0? this.ticketList[0]:null
                }
                this.total = res.total
            },
            isAction(userTicket) {
                if (userTicket.id === this.activeTicket.id) {
                    return true
                }
                return false
            },
            actionTicket(userTicket) {
                this.activeTicket = userTicket
            },
            closeSheetTicket() {
                this.sheetTicketShow = false
            },
            scrolltolower() {
                if (this.total > this.ticketList.length) {
                    this.listQuery.page += 1
                    this.getTicketPage(true)
                }
            },
            countDown() {
                if (this.type === 'grab') {
                    if (this.grabOrder.product.ext) {
                        return this.grabOrder.product.ext.grab_pay_time
                    } else {
                        return 0
                    }
                } else if(this.type === 'priority') {
                    return 1800000
                } else if(this.type === 'pay_priority') {
                    return this.grabOrder.pay_time
                }
            },
            async prioritySubmit() {
                if (!this.grabOrder.id) {
                    const res = await priorityCreate({productId: this.productId, userTicketId: this.priorityTicketId})
                    this.grabOrder.id = res
                }
                console.log(this.grabOrder)
                this.payment()
            },
            async payment() {
                uni.showLoading()
                if (this.actionPay.openMode == 'qrcode') {
                    //await
                    this.qrcodeUrl()
                } else if (this.actionPay.openMode == 'link') {
                    this.aliPay()
                } else if (this.actionPay.openMode == 'jLink') {
                    await this.plutusPay()
                }
                uni.hideLoading()
            },
            showPaySheet(res) {
                this.sheetData = {
                    orderId: res.id,
                    payPrice: res.price,
                    orderType: res.type
                }
                this.sheetPayShow = true
            },
            closeSheet() {
                this.sheetPayShow = false
            },
            selectPay() {
                this.sheetPayShow = false
            },
            async qrcodeUrl() {
                // #ifdef H5
                if(isWeChat()) {
                    uni.showLoading({
                        title: '正在发起支付'
                    })
                    const res = await getUnionWechatPay(this.grabOrder.id, {userTicketId: this.activeTicket? this.activeTicket.id:null})
                    window.location.href = res.codeUrl
                    return
                }
                // #endif
                if (this.activeTicket) {
                    if (this.activeTicket.type === 'discount') {
                        var payPrice = keepTwoDecimalFull(this.grabOrder.totalMoney * this.activeTicket.value)
                    } else if (this.activeTicket.type === 'money') {
                        var payPrice = keepTwoDecimalFull(this.grabOrder.totalMoney * 1 - this.activeTicket.value * 1)
                    } else {
                        var payPrice = this.grabOrder.totalMoney
                    }
                } else {
                    var payPrice = this.grabOrder.totalMoney
                }
                uni.$u.route("pages/unionQrcode/index", {id: this.grabOrder.id, payPrice:  payPrice, userTicketId: this.activeTicket? this.activeTicket.id:null})
            },
            aliPay() {
                if (this.activeTicket) {
                    var src = javaBaseUrl + '/alipay/grabOrder/pay/' + this.grabOrder.id + '?userTicketId=' + this.activeTicket.id
                } else {
                    var src = javaBaseUrl + '/alipay/grabOrder/pay/' + this.grabOrder.id
                }
                // #ifdef H5
                window.location.href = src
                // #endif
                // #ifdef APP-PLUS
                uni.$u.route({
                    url: "pages/webView/index",
                    params: {url: src}
                })
                // #endif
            },
            async plutusPay() {
                var url = await getPlutusPayGrab(this.grabOrder.id, {userTicketId: this.activeTicket? this.activeTicket.id:null})
                // #ifdef H5
                window.location.href = url
                // #endif
                // #ifdef APP-PLUS
                plus.runtime.openURL(url)
                /*uni.$u.route({
                    url: "pages/webView/index",
                    params: {url: url, userTicketId: this.activeTicket.id}
                })*/
                // #endif
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .nft-state {
            display: flex;
            align-content: center;
            justify-content: center;
            padding-top: 55rpx;
            .nft-state-text {
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-left: 14rpx;
            }
        }
        .time {
            display: flex;
            font-size: 44rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: 600;
            line-height: 1.2;
            color: #000000;
            text-align: center;
            justify-content: center;
            margin-top: 30rpx;
        }
        .nft-info {
            margin-top: 70rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 180rpx;
        }
        .label-cell {
            padding-left: 14rpx;
            margin-top: 110rpx;
            .pay-info {
                display: flex;
                .pay-name {
                    margin-left: 14rpx;
                    font-size: 28rpx;
                    font-family: PingFang-SC-Regular, PingFang-SC;
                    font-weight: 400;
                    color: #000000;
                }
            }
        }
        .order-price {
            display: flex;
            justify-content: space-between;
            padding-right: 54rpx;
            .order-price-label {
                padding-left: 24rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
            }
        }
        .bottom {
            position: fixed;
            width: 100%;
            box-sizing: border-box;
            bottom: 0;
            padding: 0 20rpx 30rpx 20rpx;
            .btn-confirm {
                height: 90rpx;
                background: #000000;
            }
        }
        .sheet-ticket-body {
            height: 750rpx;
            position: relative;
            .sheet-ticket-title {
                font-size: 36rpx;
                font-weight: 400;
                color: #000000;
                margin-top: 40rpx;
            }
            .sheet-close-icon {
                background: url("https://img.ionepin.com/e6ca3bf6b372078fed03bc62894656f098fac42c.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
                position: absolute;
                top: 30rpx;
                right: 38rpx;
            }
            .sheet-ticket-ul {
                padding: 30rpx 20rpx 30rpx 26rpx;
                .ticket-info {
                    display: flex;
                    align-items: center;
                    margin-top: 50rpx;
                    .ticket-item {
                        flex: auto;
                        margin-left: 20rpx;
                    }
                    &:last-child {
                        margin-bottom: 50rpx;
                    }
                }
            }
            .sheet-bottom {
                padding: 0 20rpx;
                .btn-ticket-confirm {
                    height: 90rpx;
                    background: #000000;
                    border-radius: 5rpx;
                }
            }
        }
        .sheet-body {
            height: 750rpx;
            position: relative;
            .sheet-title {
                font-size: 36rpx;
                font-weight: 400;
                color: #000000;
                margin-top: 40rpx;
            }
            .sheet-price {
                font-size: 60rpx;
                font-weight: bold;
                color: #000000;
                margin-top: 40rpx;
            }
            .sheet-pay-type {
                margin-top: 51rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #888888;
                text-align: left;
                padding-left: 46rpx;
            }
            .sheet-pay-platform {
                padding-left: 46rpx;
                .sheet-pay-item {
                    margin-top: 45rpx;
                    display: flex;
                    justify-items: flex-start;
                    align-items: center;
                    position: relative;
                    .sheet-pay-info {
                        display: flex;
                        align-items: center;
                    }
                    .sheet-pay-select {
                        position: absolute;
                        right: 42rpx;
                        background: url("https://img.ionepin.com/bf215d90109c882742e253b64bd3c052eda28243.png") no-repeat;
                        background-size: 100% 100%;
                        width: 50rpx;
                        height: 50rpx;
                    }
                }
            }
            .sheet-pay-bottom {
                width: 100%;
                box-sizing: border-box;
                position: absolute;
                padding: 0 20rpx;
                .sheet-pay-onsubmit {
                    height: 90rpx;
                    background: #000000;
                    font-size: 30rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 90rpx;
                }
                bottom: 50rpx;
                left: 0;
            }
            .sheet-close-icon {
                background: url("https://img.ionepin.com/e6ca3bf6b372078fed03bc62894656f098fac42c.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
                position: absolute;
                top: 30rpx;
                right: 38rpx;
            }
        }
    }
</style>
